<template>
  <div class="scholarship-rules-page">
    <el-card class="main-card">
      <div class="header">
        <el-icon><Trophy /></el-icon>
        <span class="title">奖学金评定规则</span>
      </div>

      <!-- 基本评定规则 -->
      <el-card class="section-card" shadow="never">
        <div class="section-title">一、基本评定规则</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <h4>不可兼得原则</h4>
            <ul>
              <li>国家奖学金可与学业奖学金荣誉称号兼得，但奖金不兼得</li>
              <li>各类专项奖学金之间不可兼得</li>
              <li>所有成果不可重复申报</li>
            </ul>
          </el-col>
          <el-col :span="12">
            <h4>禁止参评条件</h4>
            <ul>
              <li>思政为0分者</li>
              <li>课程考试成绩不合格者</li>
              <li>个人档案不在研究生处者</li>
              <li>休学期间不发放学业奖学金</li>
            </ul>
          </el-col>
        </el-row>
        <div class="time-range">
          <el-tag type="info">评定时间范围：上年9月1日至本年8月31日</el-tag>
        </div>
      </el-card>

      <!-- 评分细则 -->
      <el-card class="section-card" shadow="never">
        <div class="section-title">二、评分细则</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <h4>研二年级评分标准</h4>
            <el-table :data="grade2Rules" border size="small">
              <el-table-column prop="item" label="项目" width="120" />
              <el-table-column prop="maxScore" label="上限分数" width="100" />
              <el-table-column prop="standard" label="评分标准" />
            </el-table>
          </el-col>
          <el-col :span="12">
            <h4>研三年级评分标准</h4>
            <el-table :data="grade3Rules" border size="small">
              <el-table-column prop="item" label="项目" width="120" />
              <el-table-column prop="maxScore" label="上限分数" width="100" />
              <el-table-column prop="standard" label="评分标准" />
            </el-table>
          </el-col>
        </el-row>
      </el-card>

      <!-- 核心评分要素 -->
      <el-card class="section-card" shadow="never">
        <div class="section-title">三、核心评分要素</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-alert title="学术成果" type="success" :closable="false" />
            <ul>
              <li>高水平学术论文（CCF A类/中科院1区）</li>
              <li>发明专利授权</li>
              <li>校级以上科技奖励</li>
              <li>A2类国奖二等奖及以上</li>
              <li>A1类国家级奖励</li>
            </ul>
          </el-col>
          <el-col :span="12">
            <el-alert title="社会服务" type="warning" :closable="false" />
            <ul>
              <li>担任学生干部或社团职务</li>
              <li>参与志愿服务和社会实践活动</li>
              <li>获得校级以上荣誉称号</li>
            </ul>
          </el-col>
        </el-row>
      </el-card>

      <!-- 申请流程 -->
      <el-card class="section-card" shadow="never">
        <div class="section-title">四、申请流程</div>
        <el-steps :active="4" align-center>
          <el-step title="提交申请" description="在系统中提交奖学金申请" />
          <el-step title="导师审核" description="导师对申请进行初步审核" />
          <el-step title="学院评审" description="学院组织专家进行评审" />
          <el-step title="结果公示" description="评审结果公示并发放奖学金" />
        </el-steps>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { DataBoard, Document, Trophy, DocumentChecked } from '@element-plus/icons-vue'

const router = useRouter()
const activeMenu = ref('rules')
const activeNames = ref(['1', '2', '3', '4'])
const studentName = ref(localStorage.getItem('name') || '学生')
const grade = ref(localStorage.getItem('grade') || '')

const grade2Rules = ref([
  { item: '学业成绩', maxScore: '20分', standard: '学位课平均成绩×20%' },
  { item: '思政表现', maxScore: '30分', standard: '基础分(20)+荣誉分(5)+导师评价(5)' },
  { item: '科研能力', maxScore: '30分', standard: '论文(按CCF/中科院分区)+专利+科研项目+学科竞赛' },
  { item: '社会服务', maxScore: '20分', standard: '基础分(15)+职务分(5)' }
])

const grade3Rules = ref([
  { item: '思政表现', maxScore: '30分', standard: '同研二标准' },
  { item: '科研能力', maxScore: '50分', standard: '论文(1-4类×150%)+专利+科研项目+学科竞赛' },
  { item: '社会服务', maxScore: '20分', standard: '同研二标准' }
])

const handleMenuSelect = (index) => {
  if (index === 'dashboard') router.push('/student/dashboard')
  if (index === 'apply-scholarship') router.push('/student/apply-scholarship')
  if (index === 'my-applications') router.push('/student/my-applications')
  if (index === 'rules') router.push('/student/scholarship-rules')
}

const goBack = () => {
  router.push('/student/dashboard')
}
</script>

<style scoped>
.scholarship-rules-page {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 10px;
}
.main-card {
  background: #f8fafd;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(64,158,255,0.08);
  padding: 30px 20px;
}
.header {
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 24px;
  gap: 10px;
}
.section-card {
  margin-bottom: 24px;
  border-radius: 12px;
  background: #fff;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}
.time-range {
  margin-top: 10px;
}
</style>